<template>
  <div class="about">
    <h1>登录页面</h1>
    <button @click="login">登录</button>
    <div>
      {{ message}}
    </div>
    <div>
      {{ $store.state.isLogin }}
    </div>
  </div>
</template>

<script setup>

import { ref } from "vue";
import { useStore } from "vuex";

const store = useStore()
const isLogin = ref(store.state.isLogin)
const name = ref(store.state.name)
const message = ref("未登录")

const login = () => {
  store.commit("setLogin", true)
  message.value = "登录成功"
}
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}
</style>